/**
 * @description elem to html
 * @author Ling
 * @date 2024-08-08
 */

import { SlateElement } from '@wangeditor/editor';
import { LinkCardElement } from '../custom-types';

// 生成 html 的函数
function linkCardToHtml(elem: SlateElement, childrenHtml: string): string {
  let { title = '', link = '', target = '', linkType = '', articleId = '' } = elem as LinkCardElement;
  if (!linkType && target) {
    // 遍历target
    linkType = target.includes('article') ? 'article' : 'link';
    articleId = target.split('_')[1];
  }
  // 定义div的属性
  const divAttrs = `data-w-e-type="link-card" data-w-e-is-void data-title="${title}" data-link="${link}"`;

  // 定义a链接的属性
  const commonHtml = `
    <a class="w-e-textarea-link-card-text-content" href="${link}" target="${target}">
      <div class="w-e-textarea-link-card-title">${title}</div>
      <div class="w-e-textarea-link-card-text">${linkType === 'article' ? `文章ID: ${articleId}` : link}</div>
    </a>
  `;
  // 拼接html
  const html =
    linkType === 'article'
      ? `<div class="w-e-textarea-link-card-container" ${divAttrs} data-linkType="${linkType}" data-articleId="${articleId}">${commonHtml}</div>`
      : `<div class="w-e-textarea-link-card-container" ${divAttrs}>${commonHtml}</div>`;

  return html;
}

// 配置
const conf = {
  type: 'link-card', // 节点 type ，重要！！！
  elemToHtml: linkCardToHtml,
};

export default conf;
